<script setup lang="ts">
import type { GlobalThemeOverrides } from 'naive-ui'
import product1 from 'assets/img/product-1.png'
import product2 from 'assets/img/product-2.png'
import product3 from 'assets/img/product-3.png'
import product4 from 'assets/img/product-4.png'
import product5 from 'assets/img/product-5.png'
import product6 from 'assets/img/product-6.png'
import { useDeviceType } from '~/composables/useDeviceType'
import { appName } from '~/constants'

const useDevice = useDeviceType()

console.log(useDevice)
const productList = ref([
  {
    name: '航天航空用自卷式开口保护套',
    content: `<p class="mb-3">本产品LZKA200型完全满足EN6049-006、LZKA260型完全满足EN6049-007公司制订的企业标准Q/LZ001-2019替代了EN系列标准，产品性能达到并超过国外同类产品水平。</p><p>产品由PPS/PEEK单丝和Nomex复丝复合制成，质量轻且具有良好的耐切割、耐刮磨、以及优良的防油、防水、阻燃等环境适应性能。设置的开口且自卷曲的结构，极为方便电线/线缆在加工和维护过程中可快速便捷实施，<strong class="text-[var(--primary-color)]">广泛适用于航空航天领域的电线和电缆线束防护。</strong><p>`,
    img: product1,
    tags: ['耐切割', '耐刮磨', '适应性强'],
    id: 1,
  },
  {
    name: '航天航空用自卷式开口屏蔽保护套',
    content: `<p class="mb-3">本产品LZKA(EMI)200-**-5、LZKA(EMI)200-**-5-P           型完全满足EN6049-008。公司制订的企业标准Q/LZ005-2019替代了EN系列标准，产品性能达到并超过国外同类产品水平。</p>
<p>保护套外层为橄榄绿色，中间位置织有一条蓝色纵向标志线，用于对屏蔽保护套的识别，<strong class="text-[var(--primary-color)]">本产品分为两层结构，外层由PPS单丝和Nomex复丝复合制成，</strong>内层由镀镍软铜丝编织致密组合，LZKA(EMI)200-**-5型无聚四氟乙烯(PTFE)薄膜内贴层，LZKA(EMI)200-**-5-P型有聚四氟乙烯(PTFE)薄膜内贴层。产品除了具备LZKA200型自卷式开口保护套的所有功能外， <strong class="text-[var(--primary-color)]">又具有良好的屏蔽效能</strong>。
</p>`,
    img: product2,
    tags: ['双层结构', '软铜丝'],
    id: 2,
  },
  {
    name: '航天航空用耐高温可扩张型保护套',
    content: `<p class="mb-3">本产品LZBA240型完全满足EN6049-003标准。公司制定的企业标准Q/LZ002-2019替代了EN系列标准，产品性能达到并超过国外同类产品水平。</p><p>LZBA240型产品采用连续长丝的芳纶纤维交叉编织而成。产品质量轻，具有良好的耐切割、耐刮磨，以及优良的防油、防水、阻燃等环境适应性能。广泛适用于航空航天领域的电线和电缆线束防护。</p>`,
    img: product3,
    id: 3,
    tags: ['耐切割', '耐刮磨', '适应性强'],
  },
  {
    name: '航空用高性能纤维编织绑扎带',
    content: `<p class="mb-3">本产品LZ/DPC型完全满足A-A-52081标准、LZ/DAC型完全满足A-A-52084标准。公司制定的企业标准Q/LZ003-2019替代了A-A 系列标 准，产品性能达到并超过国外同类产品水平。</p><p> LZ/DPC型产品采用高韧性、连续长丝的聚酯纱线交叉编织而成，LZ/DAC型产品采用电气级、连续长丝、高绝缘电阻、高介电强度和高耐老化性的芳纶纱线交叉编织而成。LZ/DSC 型采用连续长丝、高电绝缘、高介电强度、高耐老化性和低吸湿性的陶瓷纤维交叉编织而成，此三款产品表面都有涂渍合成橡胶，涂层含量大约占比为7%-17%,这样的设置使产品具有良好的抗结滑性和更强的拉断力。此外本两款产品同时具有优良的阻燃、耐高温等环境适应性能。<strong class="text-[var(--primary-color)]">广泛适用于航空航天领域自卷式开口保护套的绑扎束线保护</strong></p>`,
    img: product4,
    id: 4,
    tags: ['阻燃', '耐高温', '抗结滑性', '高韧性'],
  },
  {
    name: '航天航空用自卷式开口防火保护套',
    content: `<p class="mb-3">本产品LZKA(Therm-A)260型完全满足EN6049-009-2016      标准。公司制定的企业标准Q/LZ004-2020替代了EN系列标准，产品性能达到并 超过国外同类产品水平。</p>
<p>本产品是由聚醚醚酮(PEEK)丝及芳纶纤维、石英纤维(二氧化硅)、预氧化聚丙烯腈(PANOX)纤维复合而成一种自卷式开口防火保护套，<strong class="text-[var(--primary-color)]">用于为电线和电缆线束提供隔热防火保护，</strong>产品经过防油和防水处理，可以防止吸收由于飞行器受到的极端变化而聚集的冷凝水汽，其坚固的结构<strong class="text-[var(--primary-color)]">提供了出色的耐切割性和耐磨性</strong>，可以在装配和维护期间快速简便地安装和拆除产品。</p>`,
    id: 5,
    img: product5,
    tags: ['耐切割', '耐刮磨'],
  },
  {
    name: '航天航空用-55～70',
    content: `<p class="mb-3">
本产品是我司2022年自主立项研发，且制定了企业标准Q/LZ006-2022,本标准主要参照电缆接头、电缆护套等产品而综合设计。
</p>
<p>
本产品LZNCG-WJ型是由芳纶纤维、橡胶丝复合纺织而成一种筒型护套，用于为电缆接头/尾夹等提供保护，纵向两端各留10mm 宽度的黄色穿孔带，然后两端分别通过预留好的孔穿入一段绑扎带，穿入后的绑扎带剩余长度应不小于200mm，方便用于捆扎。产品经过防油和防水处理，可以防止吸收由于飞行器受到的极端变化而聚集的冷凝水汽，<strong class="text-[var(--primary-color)]">其结构提供了出色的横向伸缩性和延展性，可以在装配和维护期间快速简便地安装和拆除产品</strong>。
</p>`,
    id: 6,
    img: product6,
    tags: ['伸缩性', '延展性', '维护简便'],
  },
])
const isShowBackTop = ref(false)
const imgUrl = ref('')
const { useAssetsImage } = useAssets()
const themeOverrides: GlobalThemeOverrides = {
  common: {
    primaryColor: '#1C1AFF',
    primaryColorHover: '#1C1AFF',
    primaryColorPressed: '#1C1AFF',
  },
}

useHead({
  title: appName,
  meta: [
    {
      name: appName,
      content: '安徽联洲新材料科技有限公司',
    },
    {
      name: 'keywords',
      content: '安徽联洲新材料科技有限公司',
    },
    {
      name: 'description',
      content: '安徽联洲新材料科技有限公司 是一家专业从事新材料、新型材料、新材料制备、新材料应用及新材料技术开发的高新技术企业。',
    },
  ],
})
onMounted(() => {
  window.addEventListener('scroll', () => {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    if (scrollTop > 100) {
      isShowBackTop.value = true
    }
    else {
      isShowBackTop.value = false
    }
  })
})

function handleScrollTo(id: string) {
  console.log(id)
  const elId = document.getElementById(id)
  if (id === 'home') {
    handleBackTop()
  }
  else {
    if (elId) {
      document.documentElement.scrollTo({
        top: elId.offsetTop - 93,
        behavior: 'smooth',
      })
    }
  }
}
function handleBackTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth',
  })
}

function handleProductClick(id: number) {
  const element: HTMLElement | null = document.querySelector(`.product-${id}`)
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
    document.documentElement.scrollTo({
      top: element.offsetTop - 200,
      behavior: 'smooth',
    })
  }
}
</script>

<template>
  <n-config-provider :theme-overrides="themeOverrides">
    <BaseHeader @nav-click="handleScrollTo" @product-click="handleProductClick" />
    <NuxtLayout>
      <div class="banner">
        <div class="pc-banner hidden h-auto max-w-full w-full md:block">
          <img :src="imgUrl">
          <div class="mx-auto h-full max-w-screen-xl flex flex-col justify-center space-y-5">
            <div class="banner-content-1 text-3xl text-[#4D4D4D]">
              航空航天用保护套管解决方案供应商
            </div>
            <div class="shuHei-font text-5xl text-[var(--primary-color)]">
              安徽联洲新材料科技有限公司
            </div>
            <div class="flex text-2xl text-[#666666]">
              <span class="align-center flex"><img src="@/assets/img/sure.png" alt="" class="mr-3 h-7 w-7"> 稳定可靠·安全合规</span>
              <span class="align-center ml-5 flex"><img src="@/assets/img/sure.png" alt="" class="mr-3 h-7 w-7">开拓进取·务实创新</span>
            </div>
          </div>
        </div>
        <div class="mobile-banner h-auto max-w-full md:hidden">
          <div class="h-full flex flex-col px-5 pt-18 space-y-5">
            <div class="text-3xl text-[var(--primary-color)]">
              <p class="shuHei-font">
                安徽联洲新材料
              </p>
              <p class="shuHei-font">
                科技有限公司
              </p>
            </div>
            <div class="flex text-sm text-[#666666]">
              <span class="align-center flex"><img src="@/assets/img/sure.png" alt="" class="mr-3 h-4 w-4"> 稳定可靠·安全合规</span>
              <span class="align-center ml-5 flex"><img src="@/assets/img/sure.png" alt="" class="mr-3 h-4 w-4">开拓进取·务实创新</span>
            </div>
          </div>
        </div>
      </div>
      <div class="describes flex flex-col items-center py-10">
        <p class="text-xl font-600 md:text-3xl">
          强大、安全、稳定的产品及专业服务
        </p>
        <div class="mt-5 flex flex-col items-center">
          <span class="text-[var(--primary-color)] font-500">下滑查看详情</span>
          <img src="@/assets/img/xiahua@2x.png" alt="" class="h-6 w-6">
        </div>
        <div class="mt-5">
          <ul class="grid grid-cols-5 gap-5 md:gap-16">
            <li class="cursor-pointer text-center text-[#666666] font-500">
              <img src="./assets/img/icon／首页@2x.png" alt="" class="mb-2 h-12 w-12">首页
            </li>
            <li class="cursor-pointer text-[#666666] font-500" @click="handleScrollTo('about')">
              <img src="./assets/img/icon／关于我们@2x.png" alt="" class="mb-2 h-12 w-12">
              关于我们
            </li>
            <li class="cursor-pointer text-[#666666] font-500" @click="handleScrollTo('honor') ">
              <img src="./assets/img/icon／荣誉介绍@2x.png" alt="" class="mb-2 h-12 w-12">
              荣誉介绍
            </li>
            <li class="cursor-pointer text-[#666666] font-500" @click="handleScrollTo('product')">
              <img src="./assets/img/icon产品介绍@2x.png" alt="" class="mb-2 h-12 w-12">
              产品介绍
            </li>
            <li class="cursor-pointer text-[#666666] font-500">
              <img src="./assets/img/icon／详细信息@2x.png" alt="" class="mb-2 h-12 w-12">
              详细信息
            </li>
          </ul>
        </div>
      </div>
      <div id="about" class="about pb-5">
        <div class="about-title flex items-center justify-center">
          <img src="@/assets/img/xiahua@2x.png" alt="" class="mr-3 h-6 w-6 -rotate-90">
          <span class="text-3xl text-[var(--primary-color)] font-600">关于我们</span>
          <img src="@/assets/img/xiahua@2x.png" alt="" class="ml-3 h-6 w-6 rotate-90">
        </div>
        <div class="about-content mx-auto mt-8 xl:max-w-screen-xl 2xl:max-w-screen-2xl text-[18px] space-y-5">
          <p>安徽联洲新材料科技有限公司成立于2016年，为国家高新技术企业，专业从事航空航天、舰船、雷达用电线组件及电缆集束，防护类辅助材料等军用产品研发、生产和服务。<strong class="text-[var(--primary-color)]">公司地处安徽省芜湖市，占地面积20000多平方米，环境优美，交通便利。</strong>公司已取得GJB9001C质量管理体系认证、环境管理体系认证、职业健康安全管理体系认证，两化融合管理体系等证书；并取得了武器装备科研生产单位三级保密资格证书、装备承制资格单位证书，所有产品均采用国军标/航标质量标准研制生产。</p>
          <p>
            公司一向以“弘扬航空报国精神、实现航空强国目标”为使命，以“诚信服务、用于创新、合作共赢”为宗旨，开拓进取，务实创新。在做好传统产品的基础上，还自筹资金与知名高校/研究所合作，开发研制出了航空航天用电缆保护套、高性能绑扎带等产品，<strong class="text-[var(--primary-color)]">并取得了中航工业301研究所的全性能鉴定报告，功能性能完全覆盖国外同类产品，属国内首创，达到国际先进水平</strong>。目前产品已在多型重点型号上推广使用，得到用户的一致认可。
          </p>
          <p>
            公司朝着成为“航空航天用电缆附件解决方案供应商”的愿景奋力前进。以雄厚的技术力量，可靠的产品质量，一流的售后服务，期待与您共同发展，共创辉煌!
          </p>
        </div>
        <div class="about-card grid grid-cols-3 mx-auto mt-5 max-w-screen-xl gap-5">
          <n-card>
            <div>
              <span class="number-font mr-3 text-4xl text-[var(--primary-color)]">2016</span>
              <span class="text-xl text-[#333333] font-500">公司成立于</span>
            </div>
            <div class="mt-3 text-[18px] font-400">
              公司朝着成为“航空航天用电缆附件解决方案
            </div>
          </n-card>
          <n-card>
            <div>
              <span class="number-font mr-3 text-4xl text-[var(--primary-color)]">20000+</span>
              <span class="text-xl text-[#333333] font-500">占地平方米</span>
            </div>
            <div class="mt-3 text-[18px] font-400">
              公司地处安徽省芜湖市，环境优美，交通便利
            </div>
          </n-card>
          <n-card>
            <div>
              <span class="number-font mr-3 text-4xl text-[var(--primary-color)]">300+</span>
              <span class="text-xl text-[#333333] font-500">全性能鉴定报告</span>
            </div>
            <div class="mt-3 text-[18px] font-400">
              取得了中航工业301研究所的全性能鉴定报告，功能性能完全覆盖国外同类产品，属国内首创，
            </div>
          </n-card>
        </div>
      </div>
      <div id="honor" class="honor flex flex-col items-center justify-center">
        <div class="honor-title mt-10">
          <img src="@/assets/img/honor-title.png" alt="" class="max-w-md">
        </div>
        <div class="honor-content mt-10 flex">
          <div class="content">
            <div class="content-title mb-3 text-2xl">
              <p class="shuHei-font font-bold">
                目之所及皆是美好，未来的道路阻且长，
              </p>
              <p class="shuHei-font text-[var(--primary-color)] font-bold">
                我们将坚守初心、继续砥砺前行；
              </p>
            </div>
            <ul class="list-disc pl-[20px] text-[18px] font-500 space-y-5">
              <li>
                2023年-荣获军队专用装备承制资格证书；
              </li>
              <li>
                2021年-荣获高新技术企业证书；
              </li>
              <li>
                2023年-国军标质量管理体系认证证书；
              </li>
              <li>
                2020年-一种电力通信光缆引下线防冰冻保护管专利证书；
              </li>
              <li>
                2022年-一种耐高温布裁剪装置专利证书；
              </li>
            </ul>
          </div>
          <div data-aos="fade-left">
            <n-image :src="useAssetsImage('img/honor-1.png')" class="max-w-xl cursor-pointer" />
          </div>
        </div>
        <div class="honor-content mt-10 text-[18px]">
          <div class="content text-center">
            <p>
              我们所获得的各项荣誉和奖项，不仅对于公司的发展起到了重要的推动作用，更加证明我们一直以来在产品质量，
            </p>
            <p>服务质量，创新意识等各方面不断的努力和不断突破；</p>
          </div>
          <div class="flex justify-center" data-aos="fade-up">
            <n-image :src="useAssetsImage('img/honor-2.png')" class="my-3 max-w-5xl" />
          </div>
          <div data-aos="fade-up">
            <n-image :src="useAssetsImage('img/honor-3.png')" class="max-w-5xl" />
          </div>
        </div>
      </div>
      <div id="productApplications" class="productApplications">
        <div class="h-full flex">
          <div class="productApplications-content">
            <img src="@/assets/img/product-applications-content.png" class="relative top-[29%] max-w-[65%]">
            <div data-aos="fade-up" class="absolute bottom-[30%] left-[3%] w-30 text-center" data-aos-delay="50">
              <div class="relative">
                <img src="@/assets/img/productApplications-1.png">
                <div class="absolute right-[-47%] top-[40%] text-lg text-[var(--primary-color)] font-bold">
                  ●
                  尾翼
                </div>
              </div>
              <div class="inline-block h-70 border-1 border-[#1545E9] border-dashed" />
            </div>
            <div data-aos="fade-up" class="absolute bottom-[38%] left-[16%] w-30 text-center" data-aos-delay="500">
              <div class="relative">
                <img src="@/assets/img/productApplications-2.png">
                <div class="absolute right-[-47%] top-[40%] text-lg text-[var(--primary-color)] font-bold">
                  ●
                  机舱
                </div>
              </div>
              <div class="inline-block h-40 border-1 border-[#1545E9] border-dashed" />
            </div>
            <div data-aos="fade-up" class="absolute bottom-[64%] left-[31%] w-30 text-center" data-aos-delay="950">
              <div class="relative">
                <img src="@/assets/img/productApplications-3.png">
                <div class="absolute right-[-64%] top-[40%] text-lg text-[var(--primary-color)] font-bold">
                  ●
                  驾驶位
                </div>
              </div>
              <div class="inline-block h-30 border-1 border-[#1545E9] border-dashed" />
            </div>
            <div data-aos="fade-up" class="absolute bottom-[31%] left-[39%] w-30 text-center" data-aos-delay="1400">
              <div class="relative">
                <img src="@/assets/img/productApplications-4.png">
                <div class="absolute right-[-64%] top-[40%] text-lg text-[var(--primary-color)] font-bold">
                  ●
                  发动机
                </div>
              </div>
              <div class="inline-block h-30 border-1 border-[#1545E9] border-dashed" />
            </div>
            <div data-aos="fade-up" class="absolute bottom-[13%] left-[50%] w-30 text-center" data-aos-delay="1900">
              <div class="relative">
                <img src="@/assets/img/productApplications-5.png">
                <div class="absolute right-[-64%] top-[40%] text-lg text-[var(--primary-color)] font-bold">
                  ●
                  机翼
                </div>
              </div>
              <div class="inline-block h-30 border-1 border-[#1545E9] border-dashed" />
            </div>
          </div>
          <div class="productApplications-title shuHei-font relative right-[5%] top-15 text-5xl text-[var(--primary-color)]">
            产 品 应 用
          </div>
        </div>
      </div>
      <div id="product" class="product mx-auto  xl:max-w-screen-xl 2xl:max-w-screen-2xl pb-8">
        <div class="product-title flex items-center justify-between pt-15">
          <div class="shuHei-font text-3xl">
            联洲新材料科技有限公司产品介绍
          </div>
          <div class="shuHei-font text-3xl text-[#E7EBFA]">
            Product
          </div>
        </div>
        <div class="product-list mt-8">
          <ul>
            <li v-for="(item, index) in productList" :key="item.id" :ref="`product-${item.id}`" class="mb-6 flex" :class="`product-${item.id}`">
              <template v-if="index % 2 === 0">
                <img :src="item.img" alt="Image" class="max-w-lg" data-aos="fade-right">
                <div class="ml-auto w-1/2 pt-10" data-aos="fade-left">
                  <div class="mb-5 flex">
                    <img src="@/assets/img/fj.png" alt="" class="h-6 w-6">
                    <div class="shuHei-font ml-3 text-2xl font-bold">
                      {{ item.name }}
                    </div>
                  </div>
                  <div class="text-[#666666]" v-html="item.content" />
                  <div class="tags mt-5 flex space-x-5">
                    <template v-for="(tag, tagIndex) in item.tags" :key="tagIndex">
                      <n-button v-if="tagIndex % 2 === 0" type="primary" size="large" variant="base">
                        {{ tag }}
                      </n-button>
                      <n-button v-else size="large" ghost type="primary">
                        {{ tag }}
                      </n-button>
                    </template>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="w-1/2 pt-10" data-aos="fade-right">
                  <div class="mb-5 flex">
                    <img src="@/assets/img/fj.png" alt="" class="h-6 w-6">
                    <div class="shuHei-font ml-3 text-2xl font-bold">
                      {{ item.name }}
                    </div>
                  </div>
                  <div class="text-[#666666]" v-html="item.content" />
                  <div class="tags mt-5 flex space-x-5">
                    <template v-for="(tag, tagIndex) in item.tags" :key="tagIndex">
                      <n-button v-if="tagIndex % 2 === 0" type="primary" size="large" variant="base">
                        {{ tag }}
                      </n-button>
                      <n-button v-else size="large" ghost type="primary">
                        {{ tag }}
                      </n-button>
                    </template>
                  </div>
                </div>
                <img :src="item.img" alt="Image" class="ml-auto max-w-lg" data-aos="fade-right">
              </template>
            </li>
          </ul>
        </div>
      </div>
      <div class="back-top fixed bottom-12 right-5 z-50 h-12 w-12 cursor-pointer items-center justify-center rounded-lg bg-white shadow" :class="isShowBackTop ? 'flex' : 'hidden'">
        <i class="text-2xl text-[#666666]" @click="handleBackTop">
          <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4 4h16v2H4zm8 3.586l6.914 6.914l-1.414 1.414l-4.5-4.5V21h-2v-9.586l-4.5 4.5L5.086 14.5z" /></svg>
        </i>
      </div>
    </NuxtLayout>
  </n-config-provider>
</template>

<style scoped lang="scss">
.banner {
  .pc-banner {
    background: url('@/assets/img/banner.png') no-repeat center center;
    background-size: 100% 100%;
    height: 637px;
    position: relative;
  }
  .mobile-banner {
    background: url('@/assets/img/mobile-banner.png') no-repeat center center;
    background-size: cover;
    height: 320px;
    position: relative;
  }
}
.banner-content-1 {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 200px;
    height: 5px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #1545e9 100%);
    left: 22%;
  }
}
.describes {
  background: url('./assets/img/describes-bg.png') no-repeat center;
  background-size: 100% 100%;
  position: relative;
  top: -45px;
}
.honor {
  background: url('./assets/img/honor-bg.png') no-repeat center;
  background-size: 100% 100%;
  padding-bottom: 50px;
}
.productApplications {
  background: url('./assets/img/product-applications-bg.png') no-repeat;
  width: 100%;
  height: 700px;
  background-size: 100% 100%;
  .productApplications-content {
    position: relative;
  }
  .productApplications-title {
    writing-mode: tb-rl;
  }
}
.slide-up-item {
  opacity: 0;
  transform: translateY(50px);
  animation: slideUp 1s ease-out forwards;
  position: relative;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
